<template>
  <!--  <div id="app">-->
  <div id="market">
    <!--------------------------------------cart--------------------->
    <div class="head">
      <div class="wrapper clearfix">
        <div class="clearfix" id="top">
          <h1 class="fl"><a><img src="../img/YNU.png"/></a></h1>
          <div class="fr clearfix" id="top1">
            <p class="fl">
              <a href="login" id="login">登录</a>
              <a href="register" id="reg">注册</a>
            </p>
          </div>
        </div>
        <ul class="clearfix" id="bott">
          <li>
            <a href="shop">所有店铺</a>
          </li>
          <li>
            <a href="item?shopId=2">足球球衣</a>
          </li>
          <li>
            <a href="item?shopId=4">主机游戏</a>
          </li>
          <li><a href="orderList">我的订单</a></li>
        </ul>
      </div>
    </div>
    <div class="cart mt">
      <!-----------------site------------------->
      <div class="site">
        <p class=" wrapper clearfix">
          <span class="fl">购物车</span>
          <img class="top" src="../img/temp/cartTop01.png">
          <a href="shop" class="fr">继续购物&gt;</a>
        </p>
      </div>
      <!-----------------table------------------->
      <div class="table wrapper">
        <div class="mytr">
          <div>订单</div>
          <div>商店名称</div>
          <div>状态</div>
          <div>操作</div>
        </div>
        <div class="myth" v-for="(item,index) in dataList" :key="index">
<!--          <div class="pro clearfix">-->
<!--            <a class="fl" @click="goOrder(index)">-->
<!--              <dl class="clearfix">-->
<!--                <dd class="fl">-->
<!--                  <p>订单{{item.orderId}}</p>-->
<!--                  <p>{{item.shopName}}</p>-->
<!--                </dd>-->
<!--              </dl>-->
<!--            </a>-->
<!--          </div>-->
          <div class="price" @click="goOrder(index)">订单{{item.orderId}}</div>
          <div class="price" >{{item.shopName}}</div>
          <div class="price" >{{item.status}}</div>
          <div class="price"><a class="del" href="#2" @click="deleteOrder(index)">删除</a></div>
          <div class="price"><a class="del" href="#2" @click="payOrder(index)">支付</a></div>
        </div>

      </div>
    </div>
    <!--返回顶部-->
    <div class="gotop">
      <a href="orderList">
        <dl>
          <dt><img src="../img/gt1.png"/></dt>
          <dd>去购<br />物车</dd>
        </dl>
      </a>
      <a @click="logOut">
        <dl>
          <dt><img src="../img/logout.png"/></dt>
          <dd>退出<br />登录</dd>
        </dl>
      </a>
    </div>
    <!--footer-->
    <div class="footer">
      <div class="top">
        <div class="wrapper">
          <div class="clearfix">
            <a href="#2" class="fl"><img src="../img/foot1.png"/></a>
            <span class="fl">7天无理由退货</span>
          </div>
          <div class="clearfix">
            <a href="#2" class="fl"><img src="../img/foot2.png"/></a>
            <span class="fl">15天免费换货</span>
          </div>
          <div class="clearfix">
            <a href="#2" class="fl"><img src="../img/foot3.png"/></a>
            <span class="fl">满599包邮</span>
          </div>
          <div class="clearfix">
            <a href="#2" class="fl"><img src="../img/foot4.png"/></a>
            <span class="fl">手机特色服务</span>
          </div>
        </div>
      </div>
      <p class="dibu">云南大学&copy;软件设计体系期末作业 软件学院软件工程专业<br />
        违法和不良信息举报电话：10086-250-110</p>
    </div>
  </div>
  <!--  </div>-->
</template>

<script>
export default {
  name: "OrderList",
  data() {
    return {
      dataList: [],
      userId: 0,
    }
  },
  created() {
    this.getUser();
  },
  methods: {
    //查询
    findAll(id) {
      this.$http({
        url: 'http://localhost:84/order/customer/getAll/'+id}).then((res)=>{
        this.dataList = res.data.data;
      },(err)=>{
        if (err.response.status==403)
        {
          this.$message("未通过认证，请先登录或被授予权限");
        }
        else {
          console.log('err',err);
        }
      });
    },

    getUser() {
      this.$http({
        url: 'http://localhost:84/user/get',
      }).then((res)=>{
        this.userId = res.data;
        this.findAll(this.userId);
      },(err)=>{
        console.log('err',err);
      });
    },

    goOrder(index){
      this.$router.push("order?orderId="+this.dataList[index].orderId);
    },

    payOrder(index){
      this.$confirm("确认支付该订单？","提示",{type:"warning"}).then(()=>{
        this.$http({
          url: 'http://localhost:84/order/pay/'+this.dataList[index].orderId}).then((res)=>{
          if (!res.data.flag) {
            this.$message.error(res.data.message);
          } else {
            this.$message.success(res.data.message);
          }
          this.findAll(this.userId);
        },(err)=>{
          console.log('err',err);
        });
      });
    },

    deleteOrder(index){
      this.$confirm("确认取消该订单？","提示",{type:"warning"}).then(()=>{
        this.$http({
          url: 'http://localhost:84/order/delete/'+this.dataList[index].orderId}).then((res)=>{
          if (!res.data.flag) {
            this.$message.error(res.data.message);
          } else {
            this.$message.success(res.data.message);
          }
          this.findAll(this.userId);
        },(err)=>{
          console.log('err',err);
        });
      });
    },

    logOut(){
      this.$confirm("确认退出登录？", "提示", {type: 'warning'}).then(() => {
        this.$http.get("http://localhost:84/user/logout").then((res) => {
          if (!res.data.flag) {
            this.$message.error(res.data.message)
          } else {
            this.$message.success(res.data.message)
          }
          sessionStorage.removeItem('token');
          this.$router.push({name:'UserLogin'});
        })
      });
    },
  }
}
</script>

<style scoped>
@import "../css/proList.css";
@import "../css/public.css";

.table .myth{
  display: flex;
  height:146px;
  border-bottom: 1px dashed #dbdbdb;
}
/*.table .mytr:first-child{*/
/*  display: flex;*/
/*  text-align: center;*/
/*}*/
/*.table .myth:nth-last-child(3){*/
/*  border-bottom: none;*/
/*}*/

/*.table .myth:last-child{*/
/*  display: block;*/
/*}*/
.table .myth div:nth-child(1),.table .mytr:first-child div:nth-child(1){
  flex: 1;
  text-align: left;
}
.table .myth div:nth-child(2){
  flex: 1;
  text-indent: 30px;
}
.table .mytr:first-child div:nth-child(2){
  flex: 1;
}
.table .myth div:nth-child(3),.table .mytr:first-child div:nth-child(3){
  flex: 1;
}
.table .myth div:nth-child(4){
  flex: 1;
  text-align: center;
}
.table .mytr:first-child div:nth-child(4){
  flex: 3;
}
.table .myth div:nth-child(5),.table .mytr:first-child div:nth-child(5){
  flex: 1;
}
.table .myth a.del{
  text-decoration: underline;
}
.table .myth .price{
  line-height:146px;
}


.table .mytr{
  height:40px;
  line-height: 40px;
  background: #e9e9e9;
  border-bottom: none;
}

.table .mytr:first-child{
  display: flex;
  text-align: center;
}
</style>